<template>
  <div class="bg-white rounded-xl shadow-sm p-5 sticky top-24">
    <!-- 用户信息 -->
    <div class="flex items-center space-x-3 mb-6">
      <img
        :src="userInfo?.avatar || 'https://picsum.photos/seed/user1/60/60'"
        alt="用户头像"
        class="w-12 h-12 rounded-full object-cover border-2 border-primary/20"
      />
      <div>
        <h3 class="font-semibold text-gray-900">
          {{ userInfo?.nickname || "用户名" }}
        </h3>
        <p class="text-sm text-gray-500">@{{ userInfo?.loginId || "user" }}</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <nav class="space-y-1">
      <a
        href="/"
        class="flex items-center space-x-3 p-3 rounded-lg transition-colors"
        :class="
          currentRoute === '/'
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-gray-600 hover:bg-gray-50'
        "
      >
        <i class="fa fa-home w-5 text-center"></i>
        <span>首页</span>
      </a>
      <a
        href="/favorites"
        class="flex items-center space-x-3 p-3 rounded-lg transition-colors"
        :class="
          currentRoute === '/favorites'
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-gray-600 hover:bg-gray-50'
        "
      >
        <i class="fa fa-star-o w-5 text-center"></i>
        <span>我的收藏</span>
        <span
          class="ml-auto bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded-full"
          >{{ favoritesCount || 0 }}</span
        >
      </a>
      <a
        href="/notifications"
        class="flex items-center space-x-3 p-3 rounded-lg transition-colors"
        :class="
          currentRoute === '/notifications'
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-gray-600 hover:bg-gray-50'
        "
      >
        <i class="fa fa-bell-o w-5 text-center"></i>
        <span>通知(未实现)</span>
        <span
          class="ml-auto bg-red-100 text-red-600 text-xs px-2 py-1 rounded-full"
          >{{ notificationsCount || 0 }}</span
        >
      </a>
      <a
        href="/profile"
        class="flex items-center space-x-3 p-3 rounded-lg transition-colors"
        :class="
          currentRoute === '/profile'
            ? 'bg-primary/10 text-primary font-medium'
            : 'text-gray-600 hover:bg-gray-50'
        "
      >
        <i class="fa fa-user-o w-5 text-center"></i>
        <span>个人中心</span>
      </a>
    </nav>

    <!-- 分割线 -->
    <div class="my-5 border-t border-gray-100"></div>

    <!-- 热门话题 -->
    <h4 class="font-semibold text-gray-700 mb-3">热门话题(未实现)</h4>
    <div class="space-y-3">
      <a
        href="#"
        class="block text-sm text-gray-600 hover:text-primary transition-colors"
      >
        #前端开发
      </a>
      <a
        href="#"
        class="block text-sm text-gray-600 hover:text-primary transition-colors"
      >
        #人工智能
      </a>
      <a
        href="#"
        class="block text-sm text-gray-600 hover:text-primary transition-colors"
      >
        #生活方式
      </a>
      <a
        href="#"
        class="block text-sm text-gray-600 hover:text-primary transition-colors"
      >
        #职场经验
      </a>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import { getUserInfo, getCurrentUserInfo } from "../services/userService"
import type { UserInfo as UserInfoType } from "../services/userService"

// 获取当前路由
const route = useRoute()
// 计算当前路由路径
const currentRoute = route.path

// 用户信息状态
const userInfo = ref<UserInfoType | null>(null)
// 收藏数量（这里可以根据实际API获取，现在先使用模拟数据）
const favoritesCount = ref<number | null>(null)
// 通知数量（这里可以根据实际API获取，现在先使用模拟数据）
const notificationsCount = ref<number | null>(null)

// 加载用户信息
const loadUserInfo = async () => {
  try {
    // 先从本地存储获取用户信息（同步）
    const localUserInfo = getUserInfo()
    if (localUserInfo) {
      userInfo.value = localUserInfo
    }

    // 然后尝试从API获取最新的用户信息（异步）
    const freshUserInfo = await getCurrentUserInfo()
    userInfo.value = freshUserInfo

    // 这里可以添加获取收藏数量和通知数量的逻辑
    // 例如：loadUserStats()
  } catch (error) {
    console.error("获取用户信息失败:", error)
    // 如果API请求失败，继续使用本地存储的用户信息（如果有）
  }
}

// 组件挂载时加载用户信息
onMounted(() => {
  loadUserInfo()
})
</script>

<style scoped>
/* 组件特定样式 */
</style>
